<!DOCTYPE html>

<meta charset="utf-8"> 
<html>
    <head>
        <style>
    /* 形状 */
#one
{
	width:100px;
	height:100px;
	background:purple;
	position:relative ;
	animation:myFirstKeyframes 10s infinite;
}      
    /* 动画 */
    @keyframes myFirstKeyframes{
        from{
            left: 0px;
            top: 0px;
        }
       25% {
            left: 1500px ;
            top:    300px ;}
         50% {
            left: 0px;
            top: 750px;
        }
       75%{
        left: 1500px;;
        top :300px;
       }
        to {
            left: 0px;
            top: 0px;
        }
        }
</style>
<style>
    #two
{
	width:100px;
	height:100px;
	background:blue;
	position:relative ;
	animation:mySenondKeyframes 20s infinite;
}    
      @keyframes mySenondKeyframes{
        from{
            left: 0px;
            top: 0px;
        }
       25% {
            left: 1500px ;
            top:    300px ;}
         50% {
            left: 0px;
            top: 750px;
        }
       75%{
        left: 1500px;;
        top :300px;
       }
        to {
            left: 0px;
            top: 0px;
        }
        }
</style>
<style>
    #three
{
	width:100px;
	height:100px;
	background:pink;
	position:relative ;
	animation:myThirdKeyframes 15s infinite;
}    
      @keyframes myThirdKeyframes{
        from{
            left: 0px;
            top: 0px;
        }
       25% {
            left: 1500px ;
            top:    300px ;}
         50% {
            left: 0px;
            top: 750px;
        }
       75%{
        left: 1500px;;
        top :300px;
       }
        to {
            left: 0px;
            top: 0px;
        }
        }
</style>
</head>
<body >
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>


</html>